<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>socket test</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #chat-box{
            width: 88%;
            margin-top: 20px;
            margin-left:6%;
            list-style: none;
            font-size: 20px;
        }
        .question{
            text-align: left;
        }
        .answer{
            text-align: right;
        }
        footer{
            position: fixed;
            bottom: 0;
            left: 0;
            background: #eee;
            width: 100%;
            height: 50px;
            border-top: 1px solid #ccc;
        }
        #reply-text{
            display: block;
            float: left;
            width: 76%;
            padding-left: 2%;
            height: 40px;
            line-height: 40px;
            margin-left: 2%;
            margin-top: 3px;
            font-size: 18px;
        }
        #reply{
            display: block;
            float: left;
            width: 16%;
            height: 40px;
            line-height: 40px;
            margin-left: 2%;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <ul id="chat-box"></ul>
    <footer>
        <input id="reply-text" type="text" placeholder="请输入···">
        <button id="reply">回复</button>
    </footer>
    <script>
        function WsServer(opts) {
            this.options = opts;
            this.init();
        }

        WsServer.prototype.init = function() {
            this.server = new WebSocket(this.options.uri);
            this.server.onopen = this.onOpen.bind(this);
            this.server.onclose = this.onClose.bind(this);
            this.server.onmessage = this.onMessage.bind(this);
            this.server.onerror = this.onError.bind(this);
            
        };

        WsServer.prototype.send = function(msg) {
            this.server.send(msg);
        };

        WsServer.prototype.onOpen = function() {
            console.log('client connection is open');
            this.send('client connection is open ...');
        };

        WsServer.prototype.onClose = function(error) {
            console.log(error);
            console.log('client connection is close !!!');
        };

        WsServer.prototype.onError = function(error) {
            console.log('WebSocket error' + error);
        };

        WsServer.prototype.onMessage = function(e) {
            msg = e.data
            console.log('server text:' + msg);
            $('#chat-box').append(' <li class="question"> ' + msg + ' </li> ');
        };

        $(function () {
            var ws = new WsServer({ uri: 'ws://192.168.17.140:8000/' });
            $('#reply').click(function () {
                var replyText = $('#reply-text').val();
                console.log('replyText::'+replyText);
                if (replyText !== '') {
                    var clientText = replyText;
                    $('#chat-box').append(' <li class="answer"> ' + replyText + ' </li> ');
                    ws.send(clientText);
                    $('#reply-text').val(null);
                } else {
                    alert('请输入回复内容');
                };
            });

        });
    </script>
</body>
</html>